Introduction to Vue
Vue.js .
মৌলিক উদাহরণ
একটি সাধারণ "হ্যালো ওয়ার্ল্ড" প্রোগ্রাম তৈরি করুন
টেক্সট ইন্টারপোলেশন সহ একটি প্রোগ্রাম তৈরি করুন
The v-bind Directive
একটি ক্লাসের সাথে একটি <div> উপাদান সংযুক্ত করুন
একটি ছবি ফাইলের সাথে একটি <img> উপাদান সংযুক্ত করুন
ফন্টের আকার পরিবর্তন করুন
অন্য উপায়ে ফন্টের আকার পরিবর্তন করুন
অন্য উপায়ে ফন্টের আকার পরিবর্তন করুন
পটভূমির রঙ পরিবর্তন করুন
পটভূমির রঙ পরিবর্তন করতে v-bind এবং একটি JavaScript শর্ত ব্যবহার করুন
শর্তসাপেক্ষে একটি ক্লাসের সাথে একটি <div> উপাদান যুক্ত করুন
একটি <div> উপাদানকে একটি শ্রেণি, শর্ত এবং ডেটা বৈশিষ্ট্যের সাথে সংযুক্ত করুন
ভি-বাইন্ড সংক্ষেপণ ব্যবহার করুন
ইনপুট পরিসর উপাদান ব্যবহার করে একটি চিত্র প্রকাশ করতে বিরতি পরিবর্তন করুন
v-for দিয়ে তৈরি করা ছবিগুলিতে ক্লিক করা হলে একটি ক্লাস বরাদ্দ করুন
CSS নিয়ম ক্লাস এবং v-bind:class এর সাথে সেট করা হয়েছে
v-bind:class দিয়ে আপনি কমা দ্বারা আলাদা করে একাধিক শ্রেণী সেট করতে পারেন
CSS নিয়মগুলি v-bind:style ব্যবহার করে ক্যামেল কেস এবং কাবাব কেস নোটেশন দিয়ে সংজ্ঞায়িত করা হয়েছে
ক্লাস অ্যারে সিনট্যাক্স ব্যবহার করে বরাদ্দ করা হয়
The v-if Directive
একটি ডেটা বৈশিষ্ট্যের উপর ভিত্তি করে শর্তসাপেক্ষে পাঠ্য প্রদর্শন করুন
একটি তুলনার উপর ভিত্তি করে শর্তসাপেক্ষে পাঠ্য প্রদর্শন করুন
v-if, v-else-if এবং v-else সহ শর্তসাপেক্ষে পাঠ্য প্রদর্শন করুন
প্রদত্ত পাঠ্যে 'পিৎজা' শব্দ থাকলে একটি বার্তা প্রদর্শন করুন
প্রদত্ত পাঠ্যে 'পিৎজা' শব্দ থাকলে একটি বার্তা এবং চিত্র প্রদর্শন করুন
একটি নির্দিষ্ট পাঠ্যে 'পিৎজা' বা 'বুরিটো' শব্দ থাকলে বিভিন্ন বার্তা এবং চিত্র প্রদর্শন করুন
The v-show Directive
ডেটা অ্যাট্রিবিউটের উপর ভিত্তি করে একটি <div> উপাদান দেখান বা লুকান
ভি-শো এবং ভি-ইফের মধ্যে পার্থক্যগুলি অন্বেষণ করুন
The v-for Directive
একটি অ্যারের উপর ভিত্তি করে একটি তালিকা ফেরত দিন
একটি ক্রম উপর ভিত্তি করে ছবি রেন্ডার
একটি অ্যারের উপর ভিত্তি করে চিত্র এবং পাঠ্য রেন্ডার করুন
একটি অ্যারের উপর ভিত্তি করে পাঠ্য ফেরত দেওয়ার সময় কোড পান
অ্যারের বস্তুর উপর ভিত্তি করে পাঠ্য রেন্ডার করার সময় সূচী পান
The v-on Directive
সংখ্যা বৃদ্ধি করতে বোতামে ক্লিক করুন
একটি আলো চালু এবং বন্ধ করতে একটি বোতাম ক্লিক করুন
প্রতিবার একটি পাঠ্য ইনপুট ইভেন্ট রেকর্ড করা হলে একটি গণনা বৃদ্ধি করা হয়
প্রতিবার একটি মাউস পয়েন্টার মুভমেন্ট ইভেন্ট নিবন্ধিত হলে একটি এলোমেলো পটভূমির রঙ তৈরি হয়
v-for দিয়ে তৈরি করা উপাদানগুলিতে v-on:click-এর সাথে একটি ক্লিক ইভেন্ট সেট থাকে
v-অন সংক্ষেপণ @ ব্যবহার করা হয়
শেখার টিপ:
এই বিস্তারিত উদাহরণগুলি Vue.js এর সমস্ত গুরুত্বপূর্ণ বৈশিষ্ট্যগুলিকে কভার করে৷ প্রতিটি উদাহরণ অনুশীলন আপনার Vue.js দক্ষতা উল্লেখযোগ্যভাবে উন্নত করবে।
আরো Vue উদাহরণ
Methods
একবার "হ্যালো ওয়ার্ল্ড!" লেখেন যে
একটি পদ্ধতি ইভেন্ট অবজেক্ট থেকে পয়েন্টার পয়েন্টার অবস্থান গ্রহণ করে
একটি পদ্ধতি যা মাউস পয়েন্টার অবস্থানের উপর ভিত্তি করে পটভূমির রঙ পরিবর্তন করে
একটি পদ্ধতি যা একটি ইনপুট ক্ষেত্র থেকে একটি নোট পৃষ্ঠার ছবিতে পাঠ্য লেখে
যখন বিভিন্ন বোতামে ক্লিক করা হয় তখন বিভিন্ন আর্গুমেন্ট মান সহ একটি পদ্ধতি বলা হয়
একটি পদ্ধতি বলা হয় যখন একটি পাঠ্য এবং একটি ঘটনা বস্তু উভয়ই আর্গুমেন্ট হয়
একাধিক বোতাম বিভিন্ন আর্গুমেন্ট সহ একই পদ্ধতিতে কল করে
Event Modifiers
.one modifier একটি বোতামে ক্লিক করার পরে শুধুমাত্র একবার সতর্কতা দেখায়
কীডাউন কীবোর্ড ইভেন্টটি এমন একটি পদ্ধতিকে কল করে যা স্ক্রিনের কী লেখে
'S' কী চাপলে .s সংশোধক একটি সতর্কতা ট্রিগার করে
.s এবং .ctrl সংশোধক একটি সতর্কতা ট্রিগার করে যখন 'S' এবং 'ctrl' কী একই সাথে চাপা হয়।
<div> উপাদানটিতে ডান-ক্লিক করা হলে পটভূমির রঙ পরিবর্তিত হয়
যখন 'ctrl' কী টিপে <div> উপাদানটিতে ডান ক্লিক করা হয় তখন পটভূমির রঙ পরিবর্তিত হয়
ডান-ক্লিক ড্রপ-ডাউন মেনু থেকে .prevent সংশোধককে বাধা দেয়
'শিফ্ট' কী চাপলে বাম ক্লিক ছবিটি পরিবর্তন করে
The v-model Directive
ভি-মডেল ব্যবহার করে কেনাকাটার তালিকায় নতুন কেনাকাটার আইটেম যোগ করা যেতে পারে
ভি-মডেল দ্বারা প্রদত্ত দ্বি-মুখী বাঁধাই বৈশিষ্ট্যটি অন্বেষণ করুন
একটি চেক বক্স একটি বুলিয়ান ডেটা অ্যাট্রিবিউট প্রতিস্থাপন করে
একটি কেনাকাটা তালিকা
একটি কেনাকাটার তালিকা যেখানে আইটেম খুঁজে পাওয়া হিসাবে চিহ্নিত করা যেতে পারে
একটি গতিশীল রেস্টুরেন্ট অর্ডার ফর্ম
রেডিও বোতাম সহ একটি প্রিয় প্রাণী নির্বাচন করুন
চেকিং বক্স সহ আপনার পছন্দের খাবার নির্বাচন করুন
ড্রপ-ডাউন তালিকা থেকে একটি গাড়ি নির্বাচন করুন
একাধিক গাড়ি নির্বাচন করুন
শুধুমাত্র পঠনযোগ্য ফর্ম ইনপুট (<input type="file">)
উচ্চতা লিখুন (<input type="range">)
একটি রঙ নির্বাচন করুন (<input type="color">)
একটি উপাদান পর্যালোচনা লিখুন (<textarea>)
Computed Properties
একটি চেকবক্স গতিশীল করা হয়েছে যাতে পাঠ্য বর্তমান অবস্থা প্রতিফলিত করে
বর্তমান চেকবক্স স্থিতি পাঠ্য হয় 'হ্যাঁ' বা 'না'
Watchers
একটি পর্যবেক্ষক ব্যবহার করা হয় যাতে 20 এবং 60 এর মধ্যে মান নির্বাচন করা যায় না
একজন পর্যবেক্ষক ইনপুট আর্গুমেন্ট হিসাবে নতুন এবং পুরানো মান নেয়
সঠিক ইমেল ঠিকানা নিশ্চিত করতে নতুন এবং পুরানো মান ব্যবহার করা হয়
Templates
টেমপ্লেট কনফিগারেশন বিকল্পটি ব্যবহার করে "হ্যালো ওয়ার্ল্ড!" দেখানো হয়
উন্নত Vue উদাহরণ
SFC Pages & Components
একটি খুব মৌলিক SFC পৃষ্ঠা
একটি উপাদান তিনবার ব্যবহার করা হয়
প্রতিটি উপাদানের নিজস্ব সংখ্যা আছে
প্রপস সহ উপাদানগুলি ভি-ফর দিয়ে তৈরি করা হয়
প্রপ সহ উপাদানগুলি ভি-ফর এবং কী বৈশিষ্ট্যগুলির সাথে তৈরি করা হয়
একটি মিথ্যা উদাহরণ প্রদর্শন করে যে মূল বৈশিষ্ট্য প্রয়োজন
একটি উদাহরণ যা দেখায় যে মূল বৈশিষ্ট্য সমস্যার সমাধান করতে পারে
Props & Emit
প্রপগুলিকে কম্পোনেন্টে একটি অ্যারে হিসাবে সংজ্ঞায়িত করা হয়
দুটি প্রপ বৈশিষ্ট্য উপাদানের উপর সংজ্ঞায়িত করা হয়
একটি বুলিয়ান প্রপ ব্যবহার করা হয় যে একটি খাদ্য একটি প্রিয় কি না তা নির্ধারণ করতে
প্রপস কনফিগারেশন বিকল্পটি একটি অবজেক্ট হিসাবে সংজ্ঞায়িত করা হয়েছে
'foodIsFavorite' ডেটা অ্যাট্রিবিউট একটি বোতাম দিয়ে পরিবর্তন করা যেতে পারে
উপাদান বুলিয়ান প্রিয় অবস্থা আউটপুট
প্রকাশিত বুলিয়ান প্রিয় স্তর App.vue দ্বারা পুনরুদ্ধার করা হয়
প্রকাশিত বুলিয়ান প্রিয় রাষ্ট্র উদ্ধার করা হয়েছে এবং App.vue-তে আপডেট করা হয়েছে
Fallthrough Attributes & Scoped Styling
শৈলী বৈশিষ্ট্য উপাদানে পড়ে
শৈলী বৈশিষ্ট্য উপাদানে পড়ে, এবং নেটিভ স্টাইলিং এর সাথে আবদ্ধ হয়
$attrs অবজেক্ট ব্যবহার করা হয় যেখানে পতনশীল বৈশিষ্ট্যগুলি রয়েছে তা নির্ধারণ করতে
অন্যথায় সংজ্ঞায়িত না হলে একটি সংজ্ঞায়িত শৈলী বিশ্বব্যাপী
শৈলী স্থানীয় হিসাবে সংজ্ঞায়িত করা হয়েছে, স্কোপড বৈশিষ্ট্য সহ
Local Components & Slots
main.js
একটি উপাদান অন্য উপাদানের মধ্যে সংজ্ঞায়িত করা যেতে পারে, এটি স্থানীয়ভাবে উপলব্ধ করে
"হ্যালো ওয়ার্ল্ড!" একটি উপাদান একটি স্লট ভিতরে গৃহীত হয়
একটি কম্পোনেন্ট স্লট কার্ডের মতো ঢাকনা তৈরি করতে ব্যবহৃত হয়
একটি কম্পোনেন্ট স্লট আরেকটি কার্ডের মতো ঢাকনা তৈরি করতে ব্যবহার করা হয়
ক্রয়-পরবর্তী সামগ্রীর সাথে একটি স্লট ব্যবহার করা হয়
দুটি স্লট একই উপাদান ব্যবহার করা হয়
স্লট সঠিক অবস্থানে সরাসরি বিষয়বস্তু লেবেল করা হয়
যদি একটি স্লটের কোন নাম না থাকে তবে এটি ডিফল্ট স্লট
একটি স্লট স্পষ্টভাবে ডিফল্ট স্লট হিসাবে সংজ্ঞায়িত করা হয়
ভি-স্লট নির্দেশিকা একটি নির্দিষ্ট স্লটে বিষয়বস্তু পরিচালনা করতে ব্যবহৃত হয়
ভি-স্লটের সংক্ষিপ্ত রূপ হল #
একটি স্কোপড স্লট থেকে ডেটা পান
তাদের অভিভাবকদের কাছে ভি-ফর পাস ডেটা দিয়ে স্কোপড স্লট তৈরি করা হয়েছে
অবজেক্টের অ্যারে থেকে তৈরি স্কোপড স্লটগুলি তাদের পিতামাতার কাছে ডেটা পাঠায়
একটি পাঠ্য একটি স্কোপড স্লট থেকে একটি ভি-বাইন্ড নির্দেশ ছাড়াই পাঠানো হয়
স্কোপড স্লট নাম দেওয়া হয়
নামযুক্ত স্কোপড স্লটগুলি App.vue-তে বিভিন্ন ডেটা পাস করে৷
আরও উন্নত বৈশিষ্ট্য
Dynamic Components & Template Refs
App.vue
<KeepAlive> এলিমেন্ট ছাড়া এলিমেন্ট ক্যাশে করা হয় না
<KeepAlive> উপাদান ক্যাশে উপাদান
শুধুমাত্র নির্দিষ্ট উপাদান ক্যাশে করা হয়
$refs অবজেক্ট একটি <p> উপাদানের মধ্যে পাঠ প্রতিস্থাপন করতে ব্যবহৃত হয়
$refs অবজেক্টটি একটি <p> উপাদান থেকে অন্য <p> উপাদানে পাঠ্য স্থানান্তর করতে ব্যবহৃত হয়
$refs অবজেক্টটি একটি <input> উপাদান থেকে একটি <p> উপাদানে মান স্থাপন করতে ব্যবহৃত হয়
<li> একটি ref বৈশিষ্ট্য সহ উপাদান, v-for দিয়ে তৈরি, $refs অবজেক্টে একটি অ্যারে হিসাবে সংগ্রহ করা হয়
Lifecycle Hooks
লাইফ সাইকেল হুক তৈরি করার আগে
লাইফসাইকেল হুক তৈরি করেছে
মাউন্ট জীবনচক্র হুক আগে
মাউন্ট করা জীবন চক্র হুক
মাউন্ট করা লাইফসাইকেল হুক একটি <ইনপুট> উপাদানের ভিতরে কার্সার স্থাপন করতে ব্যবহৃত হয়
লাইফ সাইকেল হুক আপডেট করার আগে
আপডেট করা জীবনচক্র হুক
আপডেট করা জীবনচক্র হুক একটি অসীম লুপ তৈরি করে
লাইফসাইকেল হুক আনমাউন্ট করার আগে
আনমাউন্ট করা জীবন চক্র হুক
errorCaptured lifecycle hook
errorCaptured lifecycle hook ত্রুটি সম্পর্কে তথ্য পুনরুদ্ধার করে
রেন্ডারট্র্যাকড লাইফসাইকেল হুক
সক্রিয় জীবনচক্র হুক
সক্রিয়, নিষ্ক্রিয়, এবং অন্যান্য জীবনচক্র হুক
Provide/Inject & Routing
App.vue
উপাদানগুলির মধ্যে স্যুইচিং একটি গতিশীল উপাদান ব্যবহার করে করা হয়
রাউটিং ব্যবহার করে উপাদানগুলির মধ্যে স্থানান্তর করা হয়
Animations
একটি <div> উপাদান CSS ট্রানজিশন অ্যাট্রিবিউট দিয়ে ঘোরানো হয়
CSS @keyframes অ্যাট্রিবিউট সহ একটি বৃত্তাকার <div> উপাদান বাঁ-থেকে-ডানে বাউন্স হয়
একটি <p> উপাদান একটি বোতাম দিয়ে প্রতিস্থাপিত হয়
একটি <p> উপাদান একটি <Transition> উপাদানের ভিতরে অপসারণ করা হলে বিবর্ণ হয়ে যায়
একটি <p> উপাদান পরিবর্তিত হলে ভিতরে এবং বাইরে চলে যায়
একটি <p> এলিমেন্টে 'এন্টার' এবং 'লিভ'-এর জন্য আলাদা ব্যাকগ্রাউন্ড কালার আছে
<p> উপাদানগুলি আলাদাভাবে অ্যানিমেটেড করা হয়, নাম প্রপ ব্যবহার করে <Transition> উপাদানগুলিকে আলাদা করতে
আফটার-এন্টার ইভেন্ট একটি <div> উপাদানের প্রদর্শনকে ট্রিগার করে
একটি টগল বোতাম এন্টার-বাতিল ইভেন্টটিকে ট্রিগার করে
প্রদর্শিত প্রপ <p> উপাদানটি পৃষ্ঠাটি লোড হওয়ার সাথে সাথে অ্যানিমেশন শুরু করে
'এন্টার' এবং 'লিভ'-এ অ্যানিমেশন সহ চিত্রগুলির মাধ্যমে ফ্লিপ করুন। পুরানো ছবি মুছে ফেলার আগে একটি নতুন ছবি যোগ করা হয়
'এন্টার' এবং 'লিভ'-এ অ্যানিমেশন সহ চিত্রগুলির মাধ্যমে ফ্লিপ করুন। mode="out-in" পুরানো ছবি সরানো না হওয়া পর্যন্ত নতুন ছবি যুক্ত হতে বাধা দেয়
উপাদানগুলির মধ্যে স্যুইচিং অ্যানিমেটেড
চূড়ান্ত উদাহরণ
Animations with v-for
<TransitionGroup> ব্যবহার করে v-for দিয়ে প্রদত্ত তালিকায় নতুন তালিকা উপাদান যোগ করা হয়েছে
ডাইস যোগ করা বা অপসারণ করা যেতে পারে, যোগ করা পাশা <TransitionGroup> ব্যবহার করে অ্যানিমেটেড করা হয়
ডাইস যোগ করা বা অপসারণ করা যেতে পারে, যোগ করা এবং সরানো উভয় পাশাই <TransitionGroup> ব্যবহার করে অ্যানিমেটেড করা হয়
<TransitionGroup> ব্যবহার করে ডাইস যোগ করা, সরানো, দ্রবীভূত করা বা বাছাই করা যায়, সমস্ত অ্যানিমেটেড করা যায়।
The Composition API
কম্পোজিশন এপিআই দিয়ে লেখা: টাইপরাইটারের সেভিং কাউন্ট একটি বোতামে ক্লিক করে কমানো যেতে পারে
অপশন এপিআই দিয়ে লিখিত: একটি বোতামে ক্লিক করে টাইপরাইটারের সংখ্যা সংরক্ষণ করা যেতে পারে